<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../src/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    .layui-badge {
      height: 20px;
      line-height: 19px;
      box-sizing: border-box;
    }

    .layui-badge-gray {
      color: #8c8c8c;
      background: #fafafa;
      border: 1px solid #ccc;
    }

    .layui-badge-red {
      color: #322d2d;
      background: #FF5722;
      ;
      border: 1px solid #ccc;
    }

    .layui-form-item {
      margin-bottom: 5px !important;
    }
  </style>
</head>

<body>

  <div style="padding: 15px; ">
    <form class="layui-form" action="" lay-filter="example">


      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 300px;text-align: left;">姓名：杜佳琪</label>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 300px;text-align: left;">公司：中军军弘</label>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 300px;text-align: left;">考核情况：合格</label>
          </div>
        </div>
        <div class="layui-col-xs6">

          <img src="../img/1.jpg" height="120px" />
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">时间范围</label>
        <div class="layui-input-block">
          <input type="radio" name="date_type" value="0" title="周">
          <input type="radio" name="date_type" value="1" title="月">
          <input type="radio" name="date_type" value="2" title="季度">
          <input type="radio" name="date_type" value="3" title="半年">
          <input type="radio" name="date_type" value="4" title="年">

          自定义日期：
          <input type="text" name="date" id="startDate" lay-verify="startDate" placeholder="开始日期" autocomplete="off"
            class="layui-input" style="display:inline-block;width: 100px;">
          <input type="text" name="date" id="endDate" lay-verify="endDate" placeholder="结束日期" autocomplete="off"
            class="layui-input" style="display: inline-block;width: 100px;">

          <button type="submit" class="layui-btn" lay-submit="" lay-filter="download"
            style="float:right;margin-right: 20px;">导出表格</button>

          <button type="submit" class="layui-btn" lay-submit="" lay-filter="search"
            style="float:right;margin-right: 20px;">搜索结果</button>
        </div>
      </div>
  </div>

  <div>
    <table id="detail_table" lay-filter="detail_table"></table>
  </div>
  </form>

  </div>


  <script src="../../src/layui.js" charset="utf-8"></script>

  <script src="../../src/js/excel.min.js" charset="utf-8"></script>
  <script src="....//src/setter.js?v=0513"></script>
  <script src="../../pages/js/jquery.min.js"></script>
  <script src="../../pages/js/echarts.min.js"></script>
  <script src="../../pages/js/theme/westeros.js"></script>
  <script src="../../pages/js/theme/macarons.js"></script>
  <script src="../../pages/js/theme/purple-passion.js"></script>
  <script src="../../pages/js/theme/dark.js"></script>
  <script>
    layui.use(['table', 'element', 'form', 'laydate', 'layer'], function () {
      var form = layui.form;
      var $ = layui.jquery;
      var layer = layui.layer;
      var table = layui.table;
      var element = layui.element;
      var laydate = layui.laydate;
      //存储关系
      var excel_data = [];

      var id = window.location.href.split("=")[1];

      //设置开始时间
      var startDate = laydate.render({
        elem: '#startDate',
        max: 0, //限制选择时间
        showBottom: false, //不出现底部按钮
        trigger: 'click', //日期只读
        done: function (value, date) {
          if (value !== '') {
            endDate.config.min.year = date.year;
            endDate.config.min.month = date.month - 1;
            endDate.config.min.date = date.date;
          } else {
            endDate.config.min.year = '';
            endDate.config.min.month = '';
            endDate.config.min.date = '';
          }
        }
      });

      //设置结束时间
      var endDate = laydate.render({
        elem: '#endDate',
        max: 0, //限制选择时间
        showBottom: false,//不出现底部按钮
        trigger: 'click',//日期只读
        done: function (value, date) {
          if (value !== '') {
            startDate.config.max.year = date.year;
            startDate.config.max.month = date.month - 1;
            startDate.config.max.date = date.date;
          } else {
            startDate.config.max.year = '';
            startDate.config.max.month = '';
            startDate.config.max.date = '';
          }
        }
      });

      // //日期
      // laydate.render({
      //   elem: '#startDate'
      //   , format: "yyyy-MM-dd"
      //   , type: 'date'
      //   , theme: 'molv'
      //   ,max:0 //限制选择时间
      //   ,showBottom: false //不出现底部按钮
      //   ,trigger: 'click' //日期只读
      //   // , value: current
      // });
      // laydate.render({
      //   elem: '#endDate'
      //   , format: "yyyy-MM-dd"
      //   , type: 'date'
      //   , theme: 'molv'
      //   , max:0
      //   ,showBottom: false
      //   ,trigger: 'click'
      //   // ,value: new Date()
      // });

      $.ajax({
        url: '../json/detail_form.json',
        dataType: 'json',
        async: true,
        type: 'get',
        success: function (result) {
          console.log(result);

          var data = result.data;
          excel_data = data;


        },
        error: function (data) {
          console.log(data);
        }
      });

      //监听提交
      form.on('submit(search)', function (data) {

        return false;
      });

      //监听下载
      form.on('submit(download)', function (data) {

        // var excel_data = [];
        var output = excel_data;
        excel_data.unshift({
          "name": "姓名",
          "company": "公司",
          "situation": "考核情况",
          "date": "打卡日期",
          "on": "上班打卡时间",
          "off": "下班打卡时间",
          "onSite": "上班打卡地点",
          "offSite": "下班打卡地点"
        });
        var file_name = '中军军弘-杜佳琪-合格';
        LAY_EXCEL.exportExcel(output, file_name + '.xlsx', 'xlsx');
        return false;
      });

      loadTable();


      //加载表格
      function loadTable() {
        //第一个实例
        table.render({
          elem: '#detail_table'
          , height: 'full-230'
          , url: '../json/detail_form.json' //数据接口
          , page: true //开启分页
          , size: 'sm'
          , cols: [[
            { type: 'numbers', title: '序号', width: 50 }
            , { field: 'date', title: '打卡日期', width: 100, sort: true }
            , { field: 'on', title: '上班打卡时间', width: 120, sort: true }
            , { field: 'off', title: '下班打卡时间', width: 120, sort: true }
            , { field: 'onSite', title: '上班打卡地点' }
            , { field: 'offSite', title: '下班打卡地点' }
            , {
              field: 'status', title: '打卡状态', width: 100, sort: true, templet: function (d) {
                switch (d.status) {
                  case "正常打卡":
                    return '<span class="layui-badge layui-badge-gray">正常打卡</span>';
                    break;
                  default:
                    return '<span class="layui-badge layui-badge-red">' + d.status + '</span>';
                    break;
                }

              }
            },

          ]]
        });
      }

    });

  </script>

</body>

</html>